<template>
	<div class="back_content_page">
		<div class="header">
			<van-nav-bar
				title="上门回收"
				left-arrow
				@click-left="onClickLeft"
				/>
		</div>
	<div style="height: 79vh;">

		<van-tabs v-model="active"
              @click="click_first"
			  style="height: 79vh;"
              swipeable>
			  <van-tab
          v-for="(first,i) in firsts"
          :key="i"
          :title="first.first_name">
			      <!--类型-->
			      <div>
			      	  <p class="type_xing">
			      	  	类型
			      	  </p>
			      	  <div class="btn_content_item_page" >

			      	  	<van-button
		                    round type="default"
		                    :key="j"
		                    :class="{'active_c':isActive_sec==j}"
		                    v-for="(sec,j) in first.secondList"
		                    @click="click_sec(sec.threeList,j,sec.second_name)"
		                  >{{sec.second_name}}
		                </van-button>
					</div>
			      </div>

			       <!--规格-->
			      <div style="margin-top: 2vh;">
			      	  <p class="type_xing">规格(数量)</p>
			      	  <div class="btn_content_item_page">
			      	  	<van-button
                    round type="default"
                    v-for="(thr,k) in threes"
                    :key="k"
                    :class="{'active_c':isActive_thr==k}"
                    @click="click_thr(thr,k,thr.classification_name)"
                  >{{thr.classification_name}}</van-button>
			      	  </div>
			      </div>

			  </van-tab>
			</van-tabs>

			<!--底部-->
			<div class="footer_content">
				<div class="footer_one">
					<p>预估<span>{{min_i}}-{{max_i}}</span>积分</p>
					<p style="color: #CCCCCC;font-weight: normal;font-size: 14px;">成交价格以实际评估为准</p>
				</div>
				<div class="footer_two">
					<van-button round type="default" @click="Immediate">立即预约</van-button>
				</div>
			</div>
		</div>





	</div>
</template>
<script>
	export default {
	  data() {
	    return {
          active: '',
          firsts:[],
          threes:[],
          max_i:'',
          min_i:'',
          three_id:'',
          isActive_sec:0,
          isActive_thr:0,
          second_name:'',
          three_name:''
	    };

	  },
      mounted:function(){
          this.classification_list();
      },
	   methods:{
         click_first(name, title){
             const that = this;
             console.log(1);
             let secs = that.firsts[name].secondList;
             if(secs.length>0){
                 that.threes = secs[0].threeList;
                 console.log(that.threes);
                 if(that.threes.length>0){
                     that.min_i = that.threes[0].min_integral;
                     that.max_i = that.threes[0].max_integral
                     that.three_id = that.threes[0].three_id
                 }
             }

         },
         click_sec(thrs,sec_j,second_name){
            this.threes = thrs;
             this.min_i = thrs[0].min_integral;
             this.max_i = thrs[0].max_integral
             this.three_id = thrs[0].three_id
             this.isActive_sec=sec_j;
             this.second_name= second_name;
             this.three_name= thrs[0].classification_name;
         },
         click_thr(thr,thr_k,thr_name){
             this.min_i = thr.min_integral;
             this.max_i = thr.max_integral
             this.three_id = thr.three_id
             this.isActive_thr = thr_k;
             this.three_name = thr_name;
         },
	    	Immediate(){
             console.log(this.three_id);
            console.log(this.max_i);
            console.log(this.second_name);
            console.log(this.three_name);
            var json_obj = {"three_id":this.three_id,"three_name":this.three_name,"second_name":this.second_name,"max_i":this.max_i};
            let data = JSON.stringify(json_obj) // result传递的query参数。我们转为string

            this.$router.push({
	    			  path:'/Immediate',
              query:{res:data}
	    		  })
	    	},
         classification_list(){

	    	    const that = this;
             that.$sendRequest('/recycle/classification_list',"").then(function(res){
                 console.log(res.data.result.first);
                  that.firsts= res.data.result.first;
                  console.log(that.firsts);
                  if(that.firsts.length>0){
                      let secs = that.firsts[0].secondList;
                      if(secs.length>0){
                          that.threes = secs[0].threeList;
                          that.second_name= secs[0].second_name;
                          if(that.threes.length>0){
                              that.min_i = that.threes[0].min_integral;
                              that.max_i = that.threes[0].max_integral
                              that.three_id = that.threes[0].three_id
                              that.three_name =  that.threes[0].classification_name;
                          }
                      }
                  }

             })
         },
         onClickLeft(){
             this.$router.back(-1);
         }
	    }
   };
</script>
<style scoped="scoped">
	.header >>> .van-icon-arrow-left{
		color: #2c3e50 !important;
		/* background: #000; */
	}
	.back_content_page >>> .van-tabs__wrap {
		border-top:1px solid #f9f9f9
	}
	.back_content_page >>> .van-tabs__line{
		background-color:#4C9FFD;
	}
	.back_content_page >>> .van-button{
		line-height: 39px;
	}
  .back_content_page >>> [class*=van-hairline]::after{
    border:0 solid #ffffff;
  }
  .btn_content_item_page >>> .van-button{
	box-sizing: border-box;
	width: 30%;
	height: 6vh;
	margin: 0.9vw 1.6%;
	font-size: 0.7rem;
    line-height: 5.8vh;
  }
  .btn_content_item_page >>> .van-button--normal{
    padding: 1px;
  }
  .active_c{
    background: #4C9FFD;
    color: #ffffff;
  }
	p{
		margin: 0;
		padding: 0;
	}

	.help_content >>> .van-cell__title{
		text-align: left;
		padding-left: 3vh;
	}
	.help_content>>>.van-collapse-item__content{
		text-align: left;
		padding-left: 5.4vh;
	}
	.chan_question{
		margin-top: 1vh;
		text-align: left;
	    padding-left: 3vh;
	    color: #000;
	    font-weight: 600;
	    background: #FFFFFF;
	    padding: 1vh;
	}
	.back_content_page{
		background: rgb(245,245,245);
	}
	.back_content_page >>> .van-tabs__content{
		background: #fff;
	    text-align: left;
	    padding: 3vh;
	    margin-top: 1vh;
	    height: 76vh;
	}
	.type_xing{
		color: #CCCCCC;
		font-size: 14px;
	}
	
	.back_content_page >>> .van-button{
		margin-bottom: 1vh;
		margin-top: 1vh;
	}
	.footer_content{
	    position: fixed;
	    width: 100%;
	    padding: 1px;
	    bottom: 0;
		align-items: center;
		background: #FFFFFF;
	
		display: flex;
		justify-content: space-around;

	}
	.footer_one p{
		font-size: 16px;
		font-weight: bold;
		color: #000000;
	}
	.footer_one p span{
		color: rgb(255,66,66);
	}
	.footer_content >>> .van-button__text{
		padding: 0 5vh;
	}
	.footer_content >>>.van-button{
		background: #4C9FFD;
		color: #FFFFFF;
	}
	/* van-tabs__content */
</style>

